今天要講的是金魚都能懂的網頁切版 : 破格式設計 NO011，
破格式的設計在很多樣版網站可以見到，
近期工作中也有接觸到，
滿多時候就是拿來製造兩物件重疊的效果。

本篇關鍵字

• margin
• border
• transform: rotate()

範例檔

（icon 是用 Font Awesome）

HTML

<div class="wrap">
  <div class="container">
    <div class="item">
      <div class="icon">
        <i class="fa fa-trash"></i>
      </div>
      <div class="text">
        <h2>Step 1</h2>
        <p>千萬不要只是看別人寫，要自己動腦去想、動手去做，你就會發現看的跟想的根本不一樣，大量的練習，伴隨著的就是大量的垃圾產出。</p>
      </div>
    </div>
    <div class="item">
      <div class="icon">
        <i class="fa fa-recycle"></i>
      </div>
      <div class="text">
        <h2>Step 2</h2>
        <p>學習到一定程度的時候，你就會開始檢視自己以前寫的東西，接著就會發現自己原來真的寫過一堆不知道在幹嘛的 Code，當你有自己怎麼會寫出這種東西的想法時，代表你成長了。</p>
      </div>
    </div>
    <div class="item">
      <div class="icon">
        <i class="fa fa-money"></i>
      </div>
      <div class="text">
        <h2>Step 3</h2>
        <p>前面兩個步驟不停的循環，你也就在不斷的進步，進步能讓你寫出垃圾 Code 的機會越來越低，或是你意識到可以改進的機率變高變快，然後...最終目標就是希望可以賺錢啦啦啦～～～</p>
      </div>
    </div>
  </div>
</div>

CSS

.wrap {
  width: 100%;
  height: 100vh;
  background-color: rgba(111, 123, 115, 0.5);
  display: flex;
  align-items: center;
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
  padding-top: 75px;
}

.item {
  width: 370px;
  margin: 0 15px;
  text-align: center;
  box-sizing: border-box;
  background-color: #fff;
  border: 10px solid#707C74;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(69, 76, 71, 0.8);
}

.item .icon {
  margin: -75px auto 0;
  background-color: #fff;
  width: 150px;
  height: 150px;
  font-size: 85px;
  line-height: 150px;
  border-radius: 50%;
  position: relative;
}

.item .icon::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-top: 10px solid #707C74;
  border-right: 10px solid #707C74;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-radius: 50%;
  transform: rotate(-45deg);
}

.item .fa {
  color:#707C74;
}

.item:hover .fa {
  animation: shake .2s linear infinite alternate;
}

.item .text {
  padding: 0 30px 30px;
}

.item .text h2 {
  margin-bottom: .5em;
  color:#707C74;
}

.item .text p {
  font-weight: 300;
  color: #888;
  line-height: 1.8;
}

@keyframes shake {
  from {
    transform: rotate(-10deg);
  }

  to {
    transform: rotate(10deg);
  }
}

喪屍分解

• margin 負值將元素推出原本框架外
• .icon::before 做出跟 .icon 一樣的大的圓，不直接用 .icon 做是因為後續還要做旋轉，這樣內容物才不會一起被轉到
• 利用 border 做出外框線，但只有一半要，所以設定 border-top 跟 border-right 有顏色，另外兩邊透明
• 要注意的是另外兩邊的 border 也要設定寬度，否則會變成邊邊漸細的樣子，像這樣
  
  （會歪掉是因為我偷懶沒有改 top、left 設定）
• 最後再設定 transform: rotate(-45deg)，將 border 轉到正確的位置
• .icon 設定 animation 做出不停擺動的效果

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是 loader。